<template>
  <div>
    <header><van-nav-bar title="神领快递" safe-area-inset-top /></header>
    <main>
      <div class="title">
        <span>手机号登录</span>
        <span @click="$router.push('/login')"
          >手机号登录<van-icon name="play"
        /></span>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="account"
          name="account"
          placeholder="请输入账号"
          style="margin-bottom: 20px"
        />
        <div class="pw">
          <van-field
            v-model="password"
            :type="type"
            name="password"
            placeholder="请输入密码"
          />
          <span>
            <van-icon
              name="close"
              color="#ccc"
              @click="password = ''"
              v-if="password"
            />
          </span>
          <span @click="changeType">
            <van-icon :name="eyeName" />
          </span>
        </div>
        <div style="margin: 16px">
          <van-button
            class="loginBtn"
            round
            block
            type="info"
            native-type="submit"
            :disabled="!password || !account"
            :style="{
              backgroundColor: !password || !account ? '#FADCD9' : '#EF4F3F',
              marginTop: '50px',
            }"
            >登录</van-button
          >
        </div>
      </van-form>
    </main>
  </div>
</template>
<script>
import { login } from "@/api/user.js";
export default {
  name: "PwLogin",
  data() {
    return {
      password: "123456",
      account: "xbsj001",
      eyeName: "closed-eye",
      type: "password",
    };
  },
  created() {},
  computed: {},
  methods: {
    async onSubmit(values) {
      const res = await login(values);
      console.log(res);
      if (res.data.code === 200) {
        this.$toast.success("登录成功");
        localStorage.setItem("token", res.data.data);
        // this.$router.push("/");
      } else {
        this.$toast.fail(res.data.msg);
      }
    },
    changeType() {
      this.eyeName = this.eyeName === "closed-eye" ? "eye-o" : "closed-eye";
      this.type = this.type === "password" ? "text" : "password";
    },
  },
};
</script>
<style lang='less'  scoped>
.van-hairline--bottom::after {
  border: none;
}
header {
  width: 100vw;
  height: 50px;
  position: fixed;
  top: 43px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
main {
  margin-top: 128px;
  padding: 0 33px;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    span:first-child {
      font-size: 24px;
      font-weight: 700;
      line-height: 33px;
    }
    span:last-child {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      color: #ef4f3f;
    }
  }
  .pw {
    position: relative;
    span:first-of-type {
      width: 14px;
      height: 14px;
      position: absolute;
      right: 50px;
      bottom: 20px;
      z-index: 1;
    }
    span:last-child {
      width: 16px;
      height: 16px;
      position: absolute;
      right: 20px;
      bottom: 17px;
    }
  }
  .loginBtn {
    border: 0;
  }
}
</style>
